﻿@{
    Layout = null;
}
<link rel="shortcut icon" href="favicon.ico">
<link rel="icon" type="image/gif" href="~/img/animated_favicon1.gif">
<link href="~/UILibs/easyui/themes/default/easyui.css" rel="stylesheet" />
<link href="~/UILibs/easyui/themes/icon.css" rel="stylesheet" />
<link href="~/Css/css.css" rel="stylesheet" />

<script src="~/Scripts/jquery-1.7.1.min.js"></script>
<script src="~/Scripts/jquery.jqprint-0.3.js"></script>
<script src="~/UILibs/easyui/jquery.easyui.min.js"></script>

<script src="~/UILibs/easyui/locale/easyui-lang-zh_CN.js"></script>
<script src="~/Scripts/jquery.unobtrusive-ajax.min.js"></script>
<script src="~/Scripts/jquery.validate.min.js"></script>
<script src="~/Scripts/jquery.validate.unobtrusive.min.js"></script>
<script src="~/Scripts/echarts.common.min.js"></script>
<script type="text/javascript">
    function searchData() {
        $.post("/StoreDaySaleChart/GetOrderAll2?date1=" + $("#txtDate1").val() + '&date2=' + $('#txtDate2').val(),
           function (result) {
               var dataArray = [];
               var shopName = [];
               var SaleMoney = [];

               //请求成功时执行该函数内容，result即为服务器返回的json对象  data-options="region:'center'" data-options="region:'center'"  
               $.each(result, function (index, item) {

                   //挨个取出类别并填入类别数 
                   dataArray.push({
                       name: item.shopName,
                       value: item.SaleMoney        //注意这里 应该是  只能为 name value 的形式  ，别的不支持
                   });
                   shopName.push(item.shopName);
                   SaleMoney.push(item.SaleMoney);
               });

               var myChart2 = echarts.init(document.getElementById('main2'));

               myChart2.setOption({
                   color: ['#3398DB'],
                   tooltip: {
                       trigger: 'item'  //悬浮提示框不显示
                   },

                   grid: { // 控制图的大小，调整下面这些值就可以，
                       x: 200,//这个就是显示的长度距离
                       x2: 100,//这个表示右边的距离
                       y2: 20,// y2可以控制 X轴跟Zoom控件之间的间隔，避免以为倾斜后造成 label重叠到zoom上
                   },

                   xAxis: [
                       {
                           type: 'value',
                       }
                   ],

                   yAxis: [
                       {
                           type: 'category',
                           data: shopName,
                           axisLabel: {
                               interval: 0,
                               rotate: 0,//旋转角度，为0表示水平
                               margin: 8,
                               textStyle: {
                                   color: "#222"
                               }
                           },

                       }
                   ],
                   series: [
                       {
                           name: '日平均销售额',
                           type: 'bar',
                           barWidth: '60%',
                           data: dataArray,
                           itemStyle: {
                               normal: {    //柱状图颜色
                                   color: '#ff6600',
                                   label: {
                                       //show: true,   //显示文本
                                       position: 'inside',  //数据值位置
                                       textStyle: {
                                           color: '#000',
                                           fontSize: '30'
                                       }
                                   }
                               }
                           }

                       }
                   ]
               });
           })
        }

</script>
<html>
<head>
    <meta name="viewport" content="width=device-width" />
    <title>Index</title>
</head>
<body>
    <div id="tool" style="padding-left: 100px; margin-top: 20px">
        <p><span style="font-size: larger; color: brown; margin-top: initial;">请选择起始日期进行统计:</span></p>
        <input id="txtDate1" type="text" class="easyui-datebox" />
        ---
                <input id="txtDate2" type="text" class="easyui-datebox" onchange="searchData()" />
        &nbsp&nbsp&nbsp &nbsp&nbsp&nbsp &nbsp&nbsp
@*        选择店铺： 
        <input id="shopName" class="easyui-combobox" name="shopName" />
        &nbsp&nbsp&nbsp &nbsp&nbsp&nbsp *@
                  <a class="easyui-linkbutton" iconcls="icon-search" onclick="searchData()">统计</a>
        &nbsp&nbsp&nbsp&nbsp&nbsp&nbsp
        <span style="font-size: larger; color: red">注：默认情况下是本月1号至今日的各店铺日平均销售额 &nbsp&nbsp&nbsp  &nbsp&nbsp&nbsp &nbsp&nbsp&nbsp  </span>
    </div>
    <div data-options="region:'center'">

        <div style="width: 900px; height: 800px; margin-left: 100px; margin-top: 20px; float: left" id="main2">
        </div>
    </div>

    <script type="text/javascript">
        $.post('/StoreDaySaleChart/GetOrderAll2',
          function (result) {
              var dataArray = [];
              var shopName = [];
              var SaleMoney = [];

              //请求成功时执行该函数内容，result即为服务器返回的json对象  data-options="region:'center'" data-options="region:'center'"  
              $.each(result, function (index, item) {

                  //挨个取出类别并填入类别数 
                  dataArray.push({
                      name: item.shopName,
                      value: item.SaleMoney        //注意这里 应该是  只能为 name value 的形式  ，别的不支持
                  });
                  shopName.push(item.shopName);
                  SaleMoney.push(item.SaleMoney);
              });

              var myChart2 = echarts.init(document.getElementById('main2'));

              myChart2.setOption({
                  color: ['#3398DB'],
                  tooltip: {
                      trigger: 'item'  //悬浮提示框不显示
                  },

                  grid: { // 控制图的大小，调整下面这些值就可以，
                      x: 200,//这个就是显示的长度距离
                      x2: 100,//这个表示右边的距离
                      y2: 20,// y2可以控制 X轴跟Zoom控件之间的间隔，避免以为倾斜后造成 label重叠到zoom上
                  },

                  xAxis: [
                      {
                          type: 'value',
                      }
                  ],

                  yAxis: [
                      {
                          type: 'category',
                          data: shopName,
                          axisLabel: {
                              interval: 0,
                              rotate: 0,//旋转角度，为0表示水平
                              margin: 8,
                              textStyle: {
                                  color: "#222"
                              }
                          },

                      }
                  ],
                  series: [
                      {
                          name: '日平均销售额',
                          type: 'bar',
                          barWidth: '60%',
                          data: dataArray,
                          itemStyle: {
                              normal: {    //柱状图颜色
                                  color: '#ff6600',
                                  label: {
                                      //show: true,   //显示文本
                                      position: 'inside',  //数据值位置
                                      textStyle: {
                                          color: '#000',
                                          fontSize: '30'
                                      }
                                  }
                              }
                          }

                      }
                  ]
              });
          })
    </script>
</body>
</html>
